     
     import React from 'react'

     //exact属性 严格模式 对应路由
     //构建组件的流程  基本路由配置
     //1 配置组件
     //2 配置路由
     //Router一个路由的基本组件 所有组件的“地基”
     //Router 是一个路由的配方 一般属性 path component
     // Link 一个导航组件 属性有to 
     import{BrowserRouter as Router , Route , Link, NavLink, Switch  } from 'react-router-dom'
     import Discover from './Discover'
     import Friend from './Friend'
     import My from './My'
     import Ho from './Ho'
     import "./BaseRouter.css"
     import Page404 from './Page404'

     class BaseRouter extends React.Component{
            render(){
                return(
                 <Router>
                    <fieldset>
                     <legend>BaseRouter</legend>
                     {/* <Link to="/Friend">朋友</Link>
                     |
                     <Link to="/Discover">发现</Link>
                     |
                     <Link to="/My">我的</Link>
                     |
                     <Link to="/Ho">主页</Link> */}

                        {/* NavLink的api */}
                        {/* activeClassName  被激活的时候添加类名 类名尽量不要用active 容易造成错误
                        activeStyle 被激活的时候添加样式
                        isActive 被激活的时候回调  */}
                     <NavLink activeClassName="aa"  to="/Friend">朋友</NavLink>
                     |
                     <NavLink activeStyle={{background:'yellow'}} to="/Discover">发现</NavLink>
                     |
                     <NavLink to="/My" isActive = {(param)=>{
                        //回调函数点击NavLink的时候会被触发 当路径命中的时候 param就会有值
                        console.log(param);
                        console.log("123");
                     }}>我的</NavLink>
                     |
                     <NavLink to="/Ho">主页</NavLink>

                     {/* //match对象 在路由匹配成功的时候 会注入到组件的props中 */}
                     {/*排他路由  匹配成功之后就不会往下执行了 */}
                     <Switch>
                     <Route path="/Friend/:id" component={Friend}></Route>
                     <Route path="/Discover" component={Discover}></Route>
                     <Route path="/My" component={My}></Route>
                     <Route path="/Ho" exact component={Ho}></Route>
                        {/* 配置404的时候不写路径 */}
                     <Route component={Page404}></Route>
                     </Switch>
                     
                    </fieldset>
                 </Router>
            )
        }
     }
     export default BaseRouter